<!DOCTYPE html>
<html>
  <head>
    <title>Localizame: Información de ruta</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      function initialize() {
    	  
    	    var myLatLng = new google.maps.LatLng(${centroLatitud}, ${centroLongitud});
    	    var myOptions = {
    	      zoom: 10,
    	      center: myLatLng,
    	      mapTypeId: google.maps.MapTypeId.TERRAIN
    	    };

    	    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    	    var colores = ["#FF0000","#00FF00","#0000FF"];
    	    var indexColor = 0;
    	    var distancia = 0;

    	    var flightPlanCoordinates, flightPath, arrayLogitud, arrayLatitud,myLatlng,marker;
    	    #{list items:rutas, as:'iter'}
    	    	flightPlanCoordinates = [];
    	    	arrayLogitud = [${iter.longitud}];
    	    	arrayLatitud = [${iter.latitud}];
	    	    for (var i=0; i < arrayLogitud.length; i++)
	    	    	flightPlanCoordinates[i] = new google.maps.LatLng(arrayLatitud[i], arrayLogitud[i]);
	    	    
	    	    flightPath = new google.maps.Polyline({
	    	      path: flightPlanCoordinates,
	    	      strokeColor: colores[indexColor++],
	    	      strokeOpacity: 1.0,
	    	      strokeWeight: 4
	    	    });
	
	    	   flightPath.setMap(map);
	    	   distancia += ${iter.distancia};
	    	   
	    	   myLatlng = new google.maps.LatLng(arrayLatitud[arrayLatitud.length - 1], arrayLogitud[arrayLogitud.length - 1]);
	    	   marker = new google.maps.Marker({
	    		      position: myLatlng, 
	    		      map: map, 
	    		      title:"Distancia del tramo: ${iter.distancia} Distancia total: " + distancia
	    		  });
	    	   
	    	   if (indexColor > colores.length)
	    		   indexColor = 0;
	    	#{/list}
	    	
	    	#{list items:comentarios, as:'iter'}
	    		myLatlng = new google.maps.LatLng(${iter.latitud}, ${iter.longitud});
	    	   marker = new google.maps.Marker({
	    		      position: myLatlng, 
	    		      map: map, 
	    		      title:'${iter.comentario}'
	    		  });
	    	#{/list}
      }

    </script>
  </head>
<body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>
